<template>
    <div class="tag-wrap">
        <div class="tag">
            <h3>博客标签</h3>
            <div class="tag-total">共计10标签</div>
            <div class="tag-single">
                <ul class="clear-float">
                    <li v-for="item in list" :style="{fontSize: item.fontSize}" @click="onTag(item)">
                        {{item.label}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { tagList } from '@/api/tag'
    import Cache from '@/utils/cache/index'
    let cache = new Cache()
    cache.setCacheType = 'sessionStorage'

    import constant from '@/utils/constant'
    const { CACHE_TAG_LIST } = constant

    export default {
        data() {
            return {
                list: [],
                randomFontSize: ['12px', '14px', '16px', '18px', '20px', '22px']
            }
        },
        created() {
            this.getList()
        },
        methods: {
             getList () {
                cache.getCache(CACHE_TAG_LIST, (data) => {
                    data ? this.cacheList(data) : this.requestList()
                })

            },
            cacheList (data) {
                this.handleList(data)
            },
            async requestList () {
                let { result } = await tagList()

                this.handleList(result)

                this.setCacheList(result)
            },
            // 设置缓存
            setCacheList (result) {
                cache.setCache(CACHE_TAG_LIST, result)
            },
            handleList (result) {
                let randomFontSize = this.randomFontSize

                let list = result.map(item => {
                    let randomSize = randomFontSize[Math.floor(Math.random() * randomFontSize.length)]
                    return {
                        id: item.id,
                        label: item.name,
                        fontSize: randomSize,
                    }
                })

                this.list = list
            },
            onTag (item) {
                this.$router.push({
                    name: 'articleList',
                    query: {
                        id: item.id,
                        title: item.label,
                        type: 'tag'
                    }
                })
            },
        },
    }
</script>

<style scoped>
    .tag-wrap {
        width: 100%;
    }

    .tag {
        margin: auto;
        width: 800px;
    }

    .tag h3 {
        padding: 40px 0 40px;;
        font-size: 20px;
        font-weight: 400;
    }

    .tag-total {
        font-size: 16px;
    }

    .tag-single li {
        display: inline-block;
        margin: 20px 30px;
        border: 1px solid #555;
        cursor: pointer;
    }
</style>
